<template>
  <div class="homePage">
    <Row class="card-row" :gutter="18">
      <Col :span="6" v-for="(item, index) in cardData" :key="index">
        <Card :data="item" :title="item.title" :index="index"></Card>
      </Col>
    </Row>
    <Row class="board-row" :gutter="18">
      <Col :span="18">
        <div class="data-board board">
          <div class="title">数据看板</div>
          <LineChart></LineChart>
        </div>
      </Col>
      <Col :span="6">
        <div class="simple-board board">
          <div class="title">简易看板</div>
          <Icon type="more" class="icon-more"></Icon>
          <Rank :data="rankData"></Rank>
        </div>
      </Col>
    </Row>
    <div class="home-table">
      <MTable
        :data="tableData"
        :columns="getColumns"
        :onChange="onPageChange"
        row-key="key"
        :pagination="pagination"
        :loading="loading"
      >
        <span slot="a" slot-scope="{ text }">{{ text + "测试" }}</span>
      </MTable>
    </div>
  </div>
</template>

<script>
import Card from "./Card.vue";
import Rank from "./Rank.vue";
import MTable from "@/components/MTable/index";
import LineChart from "./LineChart.vue";
import { Row, Col, Icon } from "ant-design-vue";
import { columns } from "./constant";
export default {
  name: "homePage",
  components: { Card, Row, Col, Rank, Icon, LineChart, MTable },
  data() {
    return {
      loading: false,
      cardData: [
        {
          dateStart: "2020-01-01",
          dateEnd: "2020-01-01",
          num: 98365,
          title: "昨日订单量",
          unit: "单",
        },
        {
          dateStart: "2020-01-01",
          dateEnd: "2020-01-01",
          num: 98365,
          title: "今日订单量",
          unit: "单",
        },
        {
          dateStart: "2020-01-01",
          dateEnd: "2020-01-01",
          num: 100,
          title: "成功率",
          unit: "%",
        },
        {
          dateStart: "2020-01-01",
          dateEnd: "2020-01-01",
          num: 98365,
          title: "盈利",
          unit: "万元",
        },
      ],
      rankData: [
        {
          name: "张三",
          id: 100,
          change: 14.13,
        },
        {
          name: "李四",
          id: 200,
          change: 12.13,
        },
        {
          name: "王五",
          id: 300,
          change: -12.13,
        },
        {
          name: "赵六",
          id: 400,
          change: -8.13,
        },
        {
          name: "钱七",
          id: 500,
          change: 12.13,
        },
      ],
      tableData: [
        {
          key: "1",
          a: "xxxx",
          b: "222222",
          c: "33333333",
          d: "4444444",
          f: "55555555",
          e: "6666666666",
        },
        {
          key: "21",
          a: "xxxx",
          b: "222222",
          c: "33333333",
          d: "4444444",
          f: "55555555",
          e: "6666666666",
        },
        {
          key: "31",
          a: "xxxx",
          b: "222222",
          c: "33333333",
          d: "4444444",
          f: "55555555",
          e: "6666666666",
        },
      ],
      pagination: false,
    };
  },
  methods: {
    onPageChange(pagination, filters, sorter) {
      console.log("pagination, filters, sorter: ", pagination, filters, sorter);
    },
  },
  computed: {
    getColumns() {
      return columns({ isM: this.isM });
    },
  },
};
</script>

<style scope lang="less">
.homePage {
  width: 100%;
  .board-row {
    margin-top: 18px;
  }
  .board {
    border-radius: 8px;
    background: #fff;
    padding: 20px 16px;
    box-shadow: 0 2px 26px 0 rgba(0, 0, 0, 0.06);
    padding: 12px;
    height: 340px;
    .title {
      font-size: 14px;
      font-weight: 600;
      color: #666;
    }
  }
  .simple-board {
    position: relative;
    .icon-more {
      transform: rotate(90deg);
      font-size: 12px;
      color: #333;
      position: absolute;
      cursor: pointer;
      right: 20px;
      top: 16px;
    }
  }
  .data-board {
    .title {
      font-size: 14px;
      font-weight: 600;
      color: #666;
    }
  }
  .home-table {
    margin-top: 24px;
  }
}
</style>
